<template>
  <label class="radio-item">
    <input
      type="radio"
      :value="value"
      :name="'radio'+$parent._uid"
      :checked="isChecked"
      @change="change"
      :disabled="isDisabled"
    >
    <div>
      <i class="icon"></i>
      <slot></slot>
    </div>
  </label>
</template>

<script>
export default {
  name: 'Radio',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isDisabled () {
      return this.disabled || this.$parent.disabled
    },
    isChecked () {
      // eslint-disable-line
      /* eslint-disable */
      return this.value == this.$parent.value
    }
  },
  created () {
    console.log(this)
  },
  methods: {
    change () {
      // this.$parent.$emit('change', this.value)
      // console.log(this.value)
      this.$parent.$emit('input', this.value)
    }
  }
}
</script>

<style lang="scss" scoped>
.radio-item {
  @include flex(row, center, center);
  font-size: $font-size-m;
  margin-left: 20px;
  input {
    display: none;
  }
  div {
    @include flex(row, center, center);
    .icon {
      @include wh(30px, 30px);
      border-radius: 100%;
      border: 1px solid #ccc;
      margin-right: 10px;
    }
  }
  input:checked + div {
    .icon {
      background: $base-color;
      border-color: $base-color;
    }
  }
  input:disabled + div {
    .icon {
      background: #ccc;
    }
    opacity: 0.5;
  }
}
</style>
